自定义登录表单组件回顾
本节回顾如何使用自定义组件构建登录注册表单，这是后续动态表单组件开发的基础。
登录表单结构
一个完整的登录页面包含以下要素：
┌──────────────────────────┐
│ Logo/标题 │
├──────────────────────────┤
│ ┌────────────────────┐ │
│ │ 账号输入框 │ │
│ └────────────────────┘ │
│ ┌────────────────────┐ │
│ │ 密码输入框 │ │
│ └────────────────────┘ │
│ ┌────────────────────┐ │
│ │ 验证码输入 │ │
│ └────────────────────┘ │
│ ┌────────────────────┐ │
│ │ 记住密码 | 忘记密码 │ │
│ └────────────────────┘ │
│ ┌────────────────────┐ │
│ │ 登录按钮 │ │
│ └────────────────────┘ │
│ 第三方登录入口 │
│ 注册链接 │
└──────────────────────────┘
text
核心组件设计
LoginForm 组件：
<template>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="0"
>
<el-form-item prop="username">
<el-input
v-model="formData.username"
placeholder="请输入账号"
prefix-icon="User"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formData.password"
type="password"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
/>
</el-form-item>
<el-form-item>
<div class="flex justify-between w-full">
<el-checkbox v-model="formData.remember">记住密码</el-checkbox>
<el-link type="primary">忘记密码？</el-link>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" class="w-full" @click="handleLogin" :loading="loading">
登录
</el-button>
</el-form-item>
</el-form>
</template>
vue
表单校验规则
const formRules = {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
]
}
typescript
第三方登录集成
第三方登录（微信、QQ、GitHub 等）通常使用 OAuth 2.0 流程：
- 前端跳转到第三方授权页面
- 用户同意授权后，第三方回调到应用页面并携带授权码
- 后端使用授权码换取用户信息
- 前端完成登录状态设置
状态管理
登录成功后需要更新全局状态：
- 用户信息（头像、昵称、角色）
- Token 存储（localStorage + Vuex/Pinia）
- 路由权限重新计算
↑